<template>
    <div>
        <div class="container">
        <div class="relative-box relative"></div>
        <div class="">
            <div class="relative-box relative-center">
            </div>
        </div>
        </div>
        <div>
            <div class="container-flex">
                <div class="relative-box"></div>
            </div>
        </div>
    </div>
</template>
<script>

export default ({
    setup() {
        return{};
    },
    methods: {
        
    },
})
</script>
<style scoped>
.container{
    position: relative;
    height: 100px;
}
.relative-box{
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: red;
}
.relative-left{
    left: 100px;
}
.relative-center{
    left: 50%;
    margin-left: -50px;
}
.container-flex{
    display: flex;
    justify-content: center;
    height: 100px;
}
</style>